<template>
  <div class="desktop" :style="{ backgroundImage: `url(${currentWallpaper})` }">
    <!-- 桌面图标 -->
    <div class="desktop-icons">
      <desktop-icon 
        v-for="icon in icons" 
        :key="icon.id"
        :icon="icon"
        @click="handleIconClick(icon)"
      />
    </div>

    <!-- 任务栏 -->
    <div class="taskbar">
      <div class="start-menu" @click="toggleStartMenu">
        <img :src="startIcon" alt="开始" />
      </div>
      <div class="time">{{ currentTime }}</div>
    </div>

    <!-- 开始菜单 -->
    <start-menu v-if="showStartMenu" @close="showStartMenu = false" />

    <!-- 广告容器 -->
    <div class="ad-container">
      <div id="ad-slot"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import DesktopIcon from '../components/DesktopIcon.vue'
import StartMenu from '../components/StartMenu.vue'
import wallpaper from '../assets/wallpapers/default.jpg'
import startIcon from '../assets/icons/start.svg'

const router = useRouter()
const showStartMenu = ref(false)
const currentTime = ref('')
const currentWallpaper = ref(wallpaper)

// 桌面图标配置
const icons = [
  { id: 1, name: 'Word', icon: 'word.svg', route: '/snake', position: { x: 20, y: 20 } },
  { id: 2, name: 'Excel', icon: 'excel.svg', route: '/match', position: { x: 20, y: 100 } },
  { id: 3, name: 'PowerPoint', icon: 'powerpoint.svg', route: '/puzzle', position: { x: 20, y: 180 } },
  { id: 4, name: '计算器', icon: 'calculator.svg', route: '/calculator', position: { x: 20, y: 260 } },
  { id: 5, name: '画图', icon: 'paint.svg', route: '/paint', position: { x: 20, y: 340 } },
  { id: 6, name: '回收站', icon: 'recycle-bin.svg', position: { x: 20, y: 420 } }
]

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
}

// 处理图标点击
const handleIconClick = (icon) => {
  if (icon.route) {
    router.push(icon.route)
  } else if (icon.name === '回收站') {
    alert('摸鱼时间结束啦！')
  }
}

// 切换开始菜单
const toggleStartMenu = () => {
  showStartMenu.value = !showStartMenu.value
}

let timer
onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
  
  // 初始化广告
  if (window.adsbygoogle) {
    (adsbygoogle = window.adsbygoogle || []).push({})
  }
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.desktop {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.desktop-icons {
  padding: 20px;
}

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: white;
}

.start-menu {
  width: 40px;
  height: 40px;
  cursor: pointer;
  
  img {
    width: 100%;
    height: 100%;
  }
}

.time {
  margin-left: auto;
  padding: 0 10px;
}

.ad-container {
  position: fixed;
  right: 20px;
  top: 20px;
  width: 300px;
  height: 250px;
  background: rgba(255, 255, 255, 0.8);
}
</style> 